---
comments: false
---

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字帖</title>
  <script src="leancloud.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
  <link rel="stylesheet" href="loading.css">
  <link rel="stylesheet" href="leancloud.css">

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    #container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

    }

    .card img {
      border-radius: 10px;
      overflow: hidden;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* padding: 5px;  */
      display: block;
      transition: transform 0.5s;
      /* position: relative; */
      z-index: 1;

    }

    .card {
      border-radius: 5px;
      width: 20%;
      height: 100px;
      padding: 5px;
      /* object-fit: cover;  */
      overflow: hidden;
      /* border-radius: 10px; */
      transition: transform 0.5s;
      /* position: relative; */
    }

    .text {
      /* width: 100%; 
            height: 100%; */
      position: absolute;
      z-index: 2;
      padding: 3px;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      /* top: 50%; */
      background-color: var(--main-color);
      display: none;
      transition: transform 0.5s;
    }

    .name {
      font-size: 10px;
      color: lightgray;
    }

    .author {
      font-size: 10px;
      color: lightgray;
    }

    img:hover {
      transform: scale(1.1);
      cursor: pointer;
    }

    .card:hover .text {
      display: block;
    }
  </style>
</head>

<body>

  <main class="main">
    <div id="search">
      <form class="search-form" action="javascript:return true" autocomplete="off" onsubmit="return false;">
        <div class="search-input">
          <input maxlength="80" type="search" class="search-input" id="search-input" placeholder="请输入关键字..."
            required="">
        </div>
      </form>
    </div>
  </main>

  <!-- 加载动画 -->
  <div class="loading">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div id="container"></div>
  <div id="buttonContainer">
    <div id="moreButton"></div>
  </div>
  <script>



    hiddenEle()
    localStorage.removeItem('searchZitieKeyword', "");
    var elements = document.querySelector('.post-title__text');
    elements.textContent = '字帖'

    var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';

    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';

   
    const btnSearch = document.getElementById(' btn-search');
    btnSearch.style.display = 'none';
    

    var currentPage = 1;
    var pageSize = 10; // 每页显示的条目数
    initLeanCloud()
    requestZitie(currentPage, pageSize, '', handleData)

    const query = new AV.Query("zitie_pdf2");
    query.count().then((count) => {
      var elements = document.getElementById('count');
      elements.textContent = '目前已收录' + count + '本'
    });

    var img = document.getElementById('moreButton');
    img.addEventListener('click', function () {
      currentPage++;
      var keyword = localStorage.getItem('searchZitieKeyword');
      if (keyword == null) {
        keyword = ""
      }
      console.log('keyword:', keyword);
      requestZitie(currentPage, pageSize, keyword, handleData)
    });


    function handleData(data) {
      //   console.log('获取到的数据为：',data);
      var container = document.getElementById("container");
      data.forEach(function (object) {

        console.log(object.get('cover'));
        console.log(object.get('author'));

        var newDiv = document.createElement("div");
        newDiv.classList.add("card");
        container.appendChild(newDiv);

        var textDiv = document.createElement("div");
        textDiv.classList.add("text");
        newDiv.appendChild(textDiv);

        var nameData = object.get('zitieName');
        var authorData = object.get('author');
        var name = document.createElement("div");
        name.classList.add("name");
        name.textContent = authorData + "·" + nameData;
        textDiv.appendChild(name);


        var newImg = document.createElement("img");
        var imgurl = object.get('cover')
        var decodedUrl = decodeURIComponent(imgurl);
        newImg.src = decodedUrl;
        newDiv.appendChild(newImg);

        newImg.addEventListener('click', function () {
          var imgArr = object.get('imgArr');

          var objectId = object.get('objectId');
          var isLoop = object.get('isLoop');
          var imgType = object.get('imgType');
          var loopNum = object.get('loopNum');
          var author = object.get('author');
          var name = object.get('zitieName');

          localStorage.setItem('imgArr', JSON.stringify(imgArr));

          localStorage.setItem('objectId', objectId);
          localStorage.setItem('imgType', imgType);
          localStorage.setItem('isLoop', isLoop);
          localStorage.setItem('loopNum', loopNum);
          localStorage.setItem('name', name);
          localStorage.setItem('author', author);


          // 跳转到详情页
          window.location.href = 'zitie_today_detail.html';
        });


      });

      // var data = document.querySelector('.data');
      var loading = document.querySelector('.loading');
      loading.style.display = 'none'; // 隐藏loading动画
      // data.style.opacity = 0.8; // 显示数据
    }


    // 监听搜索输入框
    document.addEventListener('DOMContentLoaded', function () {
      var inputElement = document.getElementById('search-input');
      inputElement.value = '';
      inputElement.addEventListener('input', function (event) {
        // 实时获取输入框中的内容
        var inputValue = inputElement.value;
        // localStorage.setItem('searchPoemKeyword', inputValue);
        // clean()
        // requestData(currentPage,pageSize,inputValue,handleData);
      });
      inputElement.addEventListener('keyup', function (event) {
        if (event.key === 'Enter') {
          // 用户按下了回车键，执行相应的操作
          var inputValue = inputElement.value;

          localStorage.setItem('searchZitieKeyword', inputValue);
          clean()
          currentPage = 1;
          requestZitie(currentPage, pageSize, inputValue, handleData);
          // 在这里添加你想要执行的操作
        }
      });
    });
  </script>
</body>

</html>